import {reactive, onMounted, onBeforeUnmount} from 'vue'

//自定义hook就是一个函数，将鼠标打点的相关数据、方法、钩子这些组合式api封装起来，供外部使用；类似于vue2的mixin
export default function() {
    //实现鼠标打点的数据
    let point = reactive({
        x: 0,
        y: 0,
    })

    //实现鼠标打点的方法
    function savePoint(event) {
        console.log(event.pageX, event.pageY)
        point.x = event.pageX
        point.y = event.pageY
    }

    //实现鼠标打点的声明周期钩子
    onMounted(()=>{
        //挂载时执行该回调，给window绑定点击事件
        window.addEventListener('click', savePoint)
    })

    onBeforeUnmount(()=>{
        //卸载时执行该回调，给window移除点击事件
        window.removeEventListener('click', savePoint)
    })
    
    //记得把数据返回出去
    return point
}